<template>
    <div class="box">
        <biaoti title="搜索"></biaoti>
        <van-search v-model="title" placeholder="请输入搜索关键词" />
        <van-card v-for="(v, i) in add" :key="i" :price="v.goods_price" :title="v.goods_name" thumb="" @click="editFun(v.goods_id)">
            <template #thumb>
                <img :src="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'"
                    alt="" style="width: 6rem;height: 6rem;">
            </template>

        </van-card>
    </div>
</template>

<script setup>
import biaoti from '@/components/biaoti.vue';
import { ref,watch } from 'vue';
import { searchApis } from '@/api/api';
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
let title = ref(route.query.name)
let pagenum = ref(0)
let add = ref("")
const addlist = () => {
    searchApis(title.value, pagenum.value).then(res => {
        add.value = res.data.message.goods
    })
}
addlist()

watch(title, (newValue, oldValue) => {
    addlist()
})

const editFun=(goods_id)=>{
    router.push({path:'/detiel',query:{goods_id:goods_id}})
}
</script>

<style lang="scss" scoped>
.box{
    overflow: auto;
}
</style>